<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>优惠券</title>
		<meta name="keywords" content="KEYWORDS..." />
		<meta name="description" content="DESCRIPTION..." />
		<meta name="author" content="DeathGhost" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name='apple-touch-fullscreen' content='yes'>
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<meta name="format-detection" content="address=no">
		<link rel="icon" href="images/icon/favicon.ico" type="image/x-icon">
		<link rel="apple-touch-icon-precomposed" sizes="57x57" href="images/icon/apple-touch-icon-57x57-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="120x120" href="images/icon/apple-touch-icon-120x120-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="196x196" href="images/icon/apple-touch-icon-196x196-precomposed.png">
		<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
	</head>

	<body>
	<dl class="tab_proList">
		<dt>
		  <a>未使用</a>
		  <a>已使用</a>
		  <a>已过期</a>
		</dt>
		<dd >
			<ul>
				<li class="coupon-list">
					<a href="javascript:void(0)" class="clearfix">
						<div class="fl coupon-left" >
							<h1 class="f05 fl line-height14 colorfff">¥<em>10</em></h1>
							<h2 class="f032 fl colorfff mt10 ml5 line-height-02rem">
								YUAN</br>优惠券
							</h2>
						</div>
						<div class="fr coupon-right f028 ">
							<p>1.无限制优惠券</p>
							<p>2.有限期至：2017-11-11</p>
						</div>
					</a>
				</li>
				<li class="coupon-list">
					<a href="javascript:void(0)" class="clearfix">
						<div class="fl coupon-left">
							<h1 class="f05 fl line-height14 colorfff">¥<em>10</em></h1>
							<h2 class="f032 fl colorfff mt10 ml5 line-height-02rem">
								YUAN</br>优惠券
							</h2>
						</div>
						<div class="fr coupon-right f028 ">
							<p>1.无限制优惠券</p>
							<p>2.有限期至：2017-11-11</p>
						</div>
					</a>
				</li>
			</ul>
		</dd>
		<dd id="bgImg-user1">
			<ul>
				<li class="coupon-list">
					<a href="javascript:void(0)" class="clearfix">
						<div class="fl coupon-left">
							<h1 class="f05 fl line-height14 colorfff">¥<em>10</em></h1>
							<h2 class="f032 fl colorfff mt10 ml5 line-height-02rem">
								YUAN</br>优惠券
							</h2>
						</div>
						<div class="fr coupon-right f028 ">
							<p>1.无限制优惠券</p>
							<p>2.有限期至：2017-11-11</p>
						</div>
						<div class="syImg"><img src="img/sy.png" /></div>
					</a>
				</li>
				<li class="coupon-list">
					<a href="javascript:void(0)" class="clearfix">
						<div class="fl coupon-left">
							<h1 class="f05 fl line-height14 colorfff">¥<em>10</em></h1>
							<h2 class="f032 fl colorfff mt10 ml5 line-height-02rem">
								YUAN</br>优惠券
							</h2>
						</div>
						<div class="fr coupon-right f028 ">
							<p>1.无限制优惠券</p>
							<p>2.有限期至：2017-11-11</p>
						</div>
						<div class="syImg"><img src="img/sy.png" /></div>
					</a>
				</li>
				
			</ul>
		</dd>
		<dd id="bgImg-user">
			<ul>
				<li class="coupon-list">
					<a href="javascript:void(0)" class="clearfix">
						<div class="fl coupon-left">
							<h1 class="f05 fl line-height14 colorfff">¥<em>10</em></h1>
							<h2 class="f032 fl colorfff mt10 ml5 line-height-02rem">
								YUAN</br>优惠券
							</h2>
						</div>
						<div class="fr coupon-right f028 ">
							<p>1.无限制优惠券</p>
							<p>2.有限期至：2017-11-11</p>
						</div>
						<div class="syImg"><img src="img/gq.png" /></div>
					</a>
				</li>
				<li class="coupon-list">
					<a href="javascript:void(0)" class="clearfix">
						<div class="fl coupon-left">
							<h1 class="f05 fl line-height14 colorfff">¥<em>10</em></h1>
							<h2 class="f032 fl colorfff mt10 ml5 line-height-02rem">
								YUAN</br>优惠券
							</h2>
						</div>
						<div class="fr coupon-right f028 ">
							<p>1.无限制优惠券</p>
							<p>2.有限期至：2017-11-11</p>
						</div>
						<div class="syImg"><img src="img/gq.png" /></div>
					</a>
				</li>
			</ul>
		</dd>
	</dl>

		<script src="js/jquery.js"></script>
		<script src="js/swiper.min.js"></script>
		<script>
			$(document).ready(function() {
				//product list:Tab
				$(".tab_proList dd").eq(0).show().siblings(".tab_proList dd").hide();
				$(".tab_proList dt a").eq(0).addClass("currStyle");
				$(".tab_proList dt a").click(function() {
					var liindex = $(".tab_proList dt a").index(this);
					$(this).addClass("currStyle").siblings().removeClass("currStyle");
					$(".tab_proList dd").eq(liindex).fadeIn(150).siblings(".tab_proList dd").hide();
				});
			});
		</script>
	</body>

</html>